@use "theme/globals" as *;

:host ion-item {
    --core-global-search-result-image-size: 40px;
    --core-global-search-result-title-color: var(--text);
    --core-global-search-result-content-color: var(--gray-700);
    --core-global-search-result-context-color: var(--gray-600);
    --core-global-search-result-icon-size: 16px;

    p.item-heading {
        display: flex;
        align-items: center;
        color: var(--core-global-search-result-title-color);

        core-mod-icon {
            --module-icon-padding: 0px;
            --module-legacy-icon-padding: 0px;
            --module-icon-size: var(--core-global-search-result-icon-size);
            --module-legacy-icon-size: var(--core-global-search-result-icon-size);

            margin-inline-end: var(--mdl-spacing-2);
            margin-top: 0px;
            margin-bottom: 0px;
            flex-shrink: 0;
        }

        ion-icon, .result-icon {
            width: var(--core-global-search-result-icon-size);
            height: var(--core-global-search-result-icon-size);

            margin-inline-end: var(--mdl-spacing-2);
            flex-shrink: 0;
        }

    }

    core-user-avatar {
        --core-avatar-size: var(--core-global-search-result-image-size);

        margin-top: var(--mdl-spacing-3);
        margin-bottom: var(--mdl-spacing-3);
    }

    core-course-image {
        --core-image-size: var(--core-global-search-result-image-size);

        margin-top: var(--mdl-spacing-3);
        margin-bottom: var(--mdl-spacing-3);
    }

    ion-label {

        core-format-text {
            color: var(--core-global-search-result-content-color);

            @include ellipsis(2);
        }

        .result-context-wrapper {
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;

            .result-context {
                display: flex;
                justify-items: center;
                align-items: center;
                color: var(--core-global-search-result-context-color);
                margin-top: var(--mdl-spacing-2);
                margin-inline-end: var(--mdl-spacing-4);
                font: var(--mdl-typography-body-font-sm);

                ion-icon {
                    margin-inline-end: var(--mdl-spacing-1);
                    flex-shrink: 0;
                }

                core-format-text {
                    color: var(--core-global-search-result-context-color);
                }

                span {
                    white-space: normal;
                }

            }

        }

    }

}

:host-context(:root.dark) ion-item {
    --core-global-search-result-content-color: var(--gray-400);
    --core-global-search-result-context-color: var(--gray-500);
}
